import LayerModel from "../model/LayerModel";
import cjs=createjs;
import { ViewEvent } from "@/const";
import GameConfigModel from "../model/GameConfigModel";
import SourceModel from "../model/SourceModel";

export default class BackgroundEditerView extends cjs.Container {
  private _bg_layer:cjs.Container
  private _game_layer:cjs.Container
  private _front_layer:cjs.Container
  private _ui_layer:cjs.Container
  private _top_layer:cjs.Container
  constructor(){
    super();
    //背景层
    this._bg_layer=new cjs.Container()
    this._bg_layer.name='背景层'
    this.addChild(this._bg_layer)
    //游戏层
    this._game_layer=new cjs.Container()
    this._game_layer.name='游戏层'
    this.addChild(this._game_layer)
    //前景层
    this._front_layer=new cjs.Container()
    this._front_layer.name='前景层'
    this.addChild(this._front_layer)
    //UI层
    this._ui_layer=new cjs.Container()
    this._ui_layer.name='UI层'
    this.addChild(this._ui_layer)
    //顶层
    this._top_layer=new cjs.Container()
    this._top_layer.name='顶层'
    this.addChild(this._top_layer)
    //
    this.on('added',()=>{
      //console.log('added')
      setTimeout(()=>{
        this.dispatchEvent(new cjs.Event(ViewEvent.FLUSH_TREE,true))
      })
      //this.dispatchEvent(new cjs.Event(ViewEvent.FLUSH_TREE,true))
    },this)
  }
  init(layers:LayerModel[]):void{
    //const layerModels:LayerModel[]=[]
    for(let i=0;i<layers.length;i++){
      const layer=layers[i];
      const model=LayerModel.create(layer);
      //let len=0;
        switch(model.name){
            case "背景层":
              this.parseLayerModel(this._bg_layer,model)
              break
            case "游戏层":
              this.parseLayerModel(this._game_layer,model)
              break
            default:
              //
              break
        }
    }
    setTimeout(()=>{
      this.dispatchEvent(new cjs.Event(ViewEvent.FLUSH_TREE,true))
    })
  }
  getConfig():GameConfigModel{
    const config=new GameConfigModel()
    //config.layer=[];
    this.children.forEach((child:cjs.DisplayObject)=>{
      config.layer.push(LayerModel.create(child));
      /*if(child instanceof cjs.Container){
        const model=ContainerModel.create(child);
        config.layer.push(model);
      }*/
    })
    return config;
  }
  private parseLayerModel(parent:cjs.Container,model:LayerModel):void{
    parent.removeAllChildren()
    const len=model.children.length;
    for(let i=0;i<len;i++){
      let obj:cjs.DisplayObject
      const child=model.children[i]
      switch(child.type){
        case 'image':
          obj=this.createImage(child.src as string)
          break
        case 'animation':
          obj=this.createAnimation(child.src as SourceModel)
          //console.log(obj)
          break
      }
      obj.name=child.name
      obj.x=child.x
      obj.y=child.y
      parent.addChild(obj)
    }
  }
  private createImage(src:string):cjs.Bitmap{
    const baseUrl=process.env.VUE_APP_BASE_API
    return new cjs.Bitmap(baseUrl+src)
  }
  private createAnimation(src:SourceModel):cjs.Sprite{
    const images=this.getUrls(src)

    const data={
      images: images,
      frames: [
        [0,0,400,400,0],
        [0,0,400,400,1],
        [0,0,400,400,2],
        [0,0,400,400,3],
        [0,0,400,400,4],
        [0,0,400,400,5],
        [0,0,400,400,6],
        [0,0,400,400,7],
        [0,0,400,400,8],
        [0,0,400,400,9],
        [0,0,400,400,10],
        [0,0,400,400,11]
      ]
    }
    const spriteSheet=new cjs.SpriteSheet(data)
    const handler=spriteSheet.addEventListener("complete", ()=>{
      spriteSheet.removeEventListener("complete",handler,true)
      this.dispatchEvent(new cjs.Event(ViewEvent.FLUSH_TREE,true))
      //console.log("spriteSheet complete")
    });
    const sp=new cjs.Sprite(spriteSheet)
    sp.play()
    return sp
  }
  private getUrls(src:SourceModel):string[]{
    const arr:string[]=[]
    let mod=''
    for(let i=0;i<src.digits;i++){
      mod+='0'
    }
    for(let i=src.start;i<=src.end;i++){
      const name=mod+i
      arr.push(src.baseUrl+'/'+name.substring(name.length-3,name.length)+'.'+src.ext)
    }
    return arr
  }
}